<template>
  <view>
    <view class="detailImage">
      <uniImage :src="detailData.pic" ref="childComponement"></uniImage>
    </view>
    <view class="bd">
      <view class="title">{{ detailData.name }}</view>
      <view class="pageView">
        <view class="item">访问量:{{ detailData.num }}</view>
        <view class="item">推荐值:{{ detailData.top }}</view>
        <view class="item">更新日期:{{ detailData.update }}</view>
      </view>
    </view>

    <view style=" background-color: #efefef;width: 100%; height:7px;"></view>
    <view class="article-content">
      <view class="graphicsAndText"> 图文详情</view>
      <view class="content">
        <rich-text :nodes="htmlNodes"></rich-text>
      </view>
    </view>


    <!-- S 底部导航 -->
    <view class="bottom-nav">
      <view class="left" >
        <iconBtn :imageUrl="'/static/images/product/home.png'" @handlerBtnClick="goToHome" >首页</iconBtn>
        <iconBtn type="contact" :imageUrl="'/static/images/product/customervice.png'" @handlerBtnClick="goToService">客服</iconBtn>
        <iconBtn :imageUrl="'/static/images/product/collect.png'" @handlerBtnClick="addToFavorites">收藏</iconBtn>
      </view>
      <view class="right" >
        <view class="joinShop">加入购物车</view>
        <view class="buyNow">立即购买</view>
      </view>

    </view>
    <!-- E 底部导航 -->

  </view>
</template>

<script>
import {getProductDetail} from "../../models/product";
import htmlParser from '@/common/html-parser.js'
import iconBtn from "@/components/iconBtn/IconBtn.vue";


export default {
  data() {
    return {
      detailData: {},
      htmlNodes: [],

    }
  },
  components:{iconBtn},
  onLoad(event) {
    uni.setNavigationBarTitle({title: "详情"});
    // 详情
    this.productDetail({id: event.id})
  },
  methods: {
    /**
     * 获取详情
     * @param param
     * @returns {Promise<void>}
     */
    async productDetail(param) {
      try {
        const result = await getProductDetail(param);
        this.detailData = result.data.data
        var htmlString = result.data.data.contents.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:block;\"");
        this.htmlNodes = htmlParser(htmlString);
        this.$nextTick(()=>{
          this.$refs.childComponement.getOnLoadImage()
        })

      }catch (error){
        console.error("Error fetching product:", error);
      }

    },

    /**
     * 跳转到首页
     */
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index', // 替换为你的首页路径
      });
    },
    goToService() {
    },
    addToFavorites() {
    },
    addToCart() {
    },
    buyNow() {
    },


  }
}
</script>

<style lang="less">
.detailImage {
  overflow: hidden;
  width: 100%;
  height: 400upx;

  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}

.bd {

  padding-left: 15px;
  padding-right: 15px;
  height: auto;
}

.title {
  margin-top: 5px;
  width: 100%;
  line-height: 80upx;
  color: #2d2d2d;
  font-size: 18px;
  font-weight: bold;
}

.pageView {
  display: flex;
  line-height: 36px;

  .item {
    font-size: 14px;
    flex: 1;
    box-sizing: border-box;
    color: #8e8e8e;
    white-space: nowrap; /* 防止文本折行 */
  }

}


.article-content {
  padding: 0 30rpx;
  overflow: hidden;
  font-size: 30rpx;
  margin-bottom: 30rpx;
}


.graphicsAndText {
  margin-bottom: 13px;
  margin-top: 10px;
  width: 100%;
  position: relative;
  font-weight: normal;
  /*color: white;*/
  color: #2f2f2f;
  font-size: 18px;
  display: inline-block;
  text-align: center; /* 文字左右居中 */
}

.graphicsAndText::before,
.graphicsAndText::after {
  content: '';
  position: absolute;
  top: 50%; /* 调整线的位置，使其垂直居中 */
  height: 1px; /* 线的高度 */
  background-color: #c5c5c5; /* 线的颜色 */
  width: 40px; /* 计算线的宽度，留出文字的间距 */
  z-index: 1; /* 线的层叠顺序 */
}

.graphicsAndText::before {
  left: 230upx;
  /*left: 37%;*/
  /*left: 0;*/
  transform: translateX(-100%); /* 将线移动到文字左侧 */
}

.graphicsAndText::after {
  left: 390upx;
  /*left: 53%;*/
  /*right: 0;*/
  transform: translateX(100%); /* 将线移动到文字右侧 */
}

.content {
  margin-bottom: 70px;
  padding-left: 10px;
  padding-right: 10px;
}

.bottom-nav {
  height: 38px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff; /* 根据实际情况设置背景色 */
  padding: 10px 0px 5px 0px; /* 可根据实际情况调整内边距 */
  box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.2);

  .left{
    width: 40%;display: flex;justify-content: space-around;
  }

  .right{
    width: 60%;
    display: flex;
    justify-content: center;

    .joinShop{
      background: #ff9b00;
      color: #ffffff;
      font-size: 14px;
      line-height: 38px;
      font-weight: bold;
      padding: 0px 15px;

      border-top-left-radius: 38px 38px;
      border-bottom-left-radius: 38px 38px;
    }

    .buyNow{
      background: #ff4964;
      color: #ffffff;
      line-height: 38px;
      padding: 0px 15px;
      border-top-right-radius: 38px 38px;
      border-bottom-right-radius: 38px 38px;
    }

  }

}



</style>
